import React from 'react'
import {Link} from 'react-router'
import { browserHistory } from 'react-router'

export default React.createClass({
  //You can also use the router that Router provides on "context"
	contextTypes: {
    router: React.PropTypes.object	  
	},
  render() {
    return <div>
		  <h2>Repos</h2>
			<ul>
			{ /*注意路径是绝对路径,不然有bug, 路径字符串会一直拼接*/ }
				<li><Link to="/repos/reactjs/react-router" activeClassName="active">reactjs/react-router</Link></li>
				<li><Link to="/repos/facebook/react" activeClassName="active">facebook/react</Link></li>
				<li>
				  <form action="javascript:;" onSubmit={this.submit}>
					  <input type="text" placeholder="userName"/>
					  <input type="text" placeholder="repo"/>
						<button type="submit">Go</button>
					</form>
				</li>
			</ul>
			{this.props.children}
		</div>
  },
	submit(e) {
	  e.preventDefault();
		const userName = e.target.elements[0].value
    const repo = e.target.elements[1].value
    const path = `/repos/${userName}/${repo}`
		// 自定义跳转, 而非使用Link
		// 并非所有程序都使用browserHistory
		//browserHistory.push(path)
		
		// ask for context in the component, and then you can use it
		this.context.router.push(path);
	}
})
